<script setup>
import { onMounted, reactive, ref, watch, shallowRef } from 'vue';
import * as echarts from 'echarts';
import { useEcharts } from '../../stores/echartsStore'
import { storeToRefs } from 'pinia'

const store = useEcharts()
const { xList, series } = storeToRefs(store)

let myChart = shallowRef()

const options = reactive({
    xAxis: {
        name: '星期',
        data: []
    },
    
    yAxis: {
        name: "销量"
    },
    // 浮层, 鼠标移动时, 用来显示数据
    tooltip: {},
    series: [
        {
            data: [],
            type: 'line',
            symbol: 'triangle',
            symbolSize: 20,
            lineStyle: {
                color: '#5470C6',
                width: 4,
                type: 'dashed'
            },
            itemStyle: {
                borderWidth: 3,
                borderColor: '#EE6666',
                color: 'yellow'
            }
        }
    ]
})

onMounted(() => {



    store.handleEcharts()

    myChart = echarts.init(document.querySelector('#histogram'), 'dark');

    options.xAxis.data = xList
    options.series[0].data = series

    window.onresize = () => {
        // 自适应大小
        myChart.resize()
    }
})

// 监听
watch(options, (newOptions) => {
    myChart.showLoading()
    myChart.setOption(newOptions)
    myChart.hideLoading()
})

</script>

<template>
    <div id="histogram"></div>
</template>

<style scoped>
#histogram {
    width: 60%;
    height: 80%;
}
</style>